package com.midele.goodstuff.ui.releasegoods.screen

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.midele.goodstuff.R
import com.midele.goodstuff.navigation.publishActivity
import com.midele.goodstuff.navigation.publishNewThing
import com.midele.goodstuff.ui.component.CommBackArrow
import com.midele.goodstuff.viewmodel.ReleaseViewModel

/**
 * 选择发布方式
 */
@Composable
internal fun ReleaseMethodRoute(
    modifier: Modifier = Modifier,
    viewModel: ReleaseViewModel = hiltViewModel(),
    navController: NavHostController,
) {

    ReleaseMethodScreen(viewModel,navController)
}
@Composable
fun ReleaseMethodScreen(
    viewModel: ReleaseViewModel,
    navController: NavHostController,
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
    ) {
        // 背景图片
        Image(
            painter = painterResource(id = R.drawable.ic_release_method_bg),
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )

        // 标题
        CommBackArrow(
            title = stringResource(id = R.string.str_release_goods_title),
            onClick = {navController.popBackStack()},
            modifier = Modifier
                .align(Alignment.TopCenter)
//                .padding(top = 60.dp)
        )

        // 底部模态对话框
        Column(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .fillMaxWidth()
                .padding(16.dp,57.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_release_method_hint),
                contentDescription = null,
                modifier = Modifier.size(168.dp,29.dp)
                    .align(Alignment.CenterHorizontally)
            )
            // 选项1：从物品库选择
            OptionButton(
                title = stringResource(id = R.string.str_release_item_library),
                subtitle = stringResource(id = R.string.str_release_item_library_hint),
                icon = R.drawable.ic_release_item_library,
                onClick = {},
                modifier = Modifier.padding(bottom = 16.dp, top = 21.dp)
            )
            
            // 选项2：发布新物品
            OptionButton(
                title = stringResource(id = R.string.str_release_new_items),
                subtitle = stringResource(id = R.string.str_release_new_goods),
                icon = R.drawable.ic_release_new_items,
                onClick = { navController.navigate(publishNewThing) },
                modifier = Modifier.padding(bottom = 24.dp)
            )
            IconButton(
                onClick = {},
                modifier = Modifier
                    .align(Alignment.CenterHorizontally)
            ) {
                Image(
                    painter = painterResource(R.drawable.ic_release_close),
                    contentDescription = null,
                    modifier = Modifier
                        .size(44.dp)
                        .align(Alignment.CenterHorizontally),
                    contentScale = ContentScale.Crop,
                )
            }

        }
    }
}

@Composable
private fun OptionButton(
    title: String,
    subtitle: String,
    icon: Int,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(12.dp))
            .background(Color(0xFF3A3A3A))
            .clickable { onClick() }
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(
            modifier = Modifier.weight(1f)
        ) {
            Text(
                text = title,
                color = Color.White,
                fontSize = 16.sp,
                fontWeight = FontWeight.Medium,
                modifier = Modifier.padding(bottom = 4.dp)
            )
            Text(
                text = subtitle,
                color = Color(0xFFAAAAAA),
                fontSize = 12.sp
            )
        }
        
        Image(
            painter = painterResource(id = icon),
            contentDescription = null,
            modifier = Modifier.size(50.dp)
        )
    }
}